<template>
  <div>
    <div class="content">
     
      <div class="area">
        <div style="width: 96%;margin: 0 auto;">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="加价模板" name="first">
            <el-button type="primary" @click="btnAdd">添加定价模版</el-button>
            <div class="table-area">
                  <el-table
                    border
                    :data="dataList"
                    stripe
                    style="width: 100%;height: 100px;"
                      v-loading="loading"
                    element-loading-text="开发中..."
                  >
                    <el-table-column
                      prop="id"
                      align="center"
                      label="id"
                      #default="scope"
                      
                    >
                    
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      align="center"
                      label="名称"
                      #default="scope"
                      
                    >
                      
                      
                        
                  
                    </el-table-column>
                    <el-table-column
                      align="center"
                      prop="leixin"
                      label="类型"
                    />
                    <el-table-column
                      align="center"
                      prop="jiajia"
                      label="加价规则"
                      #default="scope"
                    >
                  
                    </el-table-column>
                  
                    <el-table-column
                      align="center"
                      fixed="right"
                      label="操作"
                      
                    >
                      <template #default="scope">
                        <div
                          :style="
                            isMobile ? 'display: flex; flex-direction: column;' : ''
                          "
                        >
                        <el-button
                            type="primary"
                            
                            size="small"
                            @click="edintYuzhis(scope.row)"
                            style="margin-bottom: 5px"
                            >编辑</el-button
                          >
                        
                          <el-button
                            type="danger"
                            plain
                            size="small"
                            @click="handleDelete(scope.row.id)"
                            >删除</el-button
                          >
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
            </div>
         <!-- 定价模版新增 -->
          <el-dialog
            v-model="mobanShow"
            :show-close="false"
            draggable
            title="添加"
            width="56%"
          >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="模版名称" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="区间开始金额">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="区间结束金额">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="级别差价" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="定价策略" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="我的利润" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="一级服务商" style="margin-left: 12px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="尊贵铂金" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="荣耀黄金" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="秩序白银" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="普通会员" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
		
      </div>
	  <div style="display: flex;justify-self: center;">
			<el-button type="primary" plain @click="mobanClose">取消</el-button>
            <el-button type="primary">保存</el-button>
		</div>
    </el-dialog>
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
          <el-tab-pane label="通用预制定价" name="second">
            <el-button type="primary" @click="addDingjia">添加预制定价</el-button>
            <el-select
            v-model="yuzhiValue"
            class="m-2"
            placeholder="类型选择"
            size="large"
            style="width: 240px"
            @change="getType(yuzhiValue)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
            <div class="table-area">
          <el-table
            border
            :data="dataList2"
            stripe
          style="width: 100%;"
              
          >
            
            <el-table-column
              prop="name"
              align="center"
              label="名称"
              #default="scope"
            
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiner"
              label="区间金额"
            />
            <el-table-column
              align="center"
              prop="_plan_id_text"
              label="定价策略类型"
             
            >
           
            </el-table-column>
            <el-table-column
              prop="_status_text"
              align="center"
              label="当前定价状态"
              #default="scope"
             
            >
            </el-table-column>
           
           
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              
            >
              <template #default="scope">
                <div
                  :style="
                    isMobile ? 'display: flex; flex-direction: column;' : ''
                  "
                >
                <el-button
                    type="primary"
                    
                    size="small"
                  @click="edintYuzhi(scope.row)"
                    style="margin-bottom: 5px"
                    >编辑</el-button
                  >
                 
                  <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
          <el-tab-pane label="一键通预制定价" name="second2">
            <el-button type="primary" @click="btnAdd">一键通预制定价</el-button>
            <div class="table-area">
          <el-table
            border
            :data="dataList2"
            stripe
            style="width: 100%;height: 100px;"
               v-loading="loading"
            element-loading-text="开发中..."
          >
            
            <el-table-column
              prop="name"
              align="center"
              label="名称"
              #default="scope"
            
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiner"
              label="区间金额"
            />
            <el-table-column
              align="center"
              prop="leixin"
              label="类型"
             
            >
           
            </el-table-column>
            <el-table-column
              prop="dizeng"
              align="center"
              label="递增数值"
              #default="scope"
             
            >
            </el-table-column>
            <el-table-column
              prop="guizhe"
              align="center"
              label="加价规则"
              #default="scope"
            
            >
            </el-table-column>
            <el-table-column
              prop="type"
              align="center"
              label="定价状态"
              #default="scope"
             
            >
            <el-switch v-model="scope.row.type" />
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              
            >
              <template #default="scope">
                <div
                  :style="
                    isMobile ? 'display: flex; flex-direction: column;' : ''
                  "
                >
                <el-button
                    type="primary"
                    
                    size="small"
                  @click="btnAdd"
                    style="margin-bottom: 5px"
                    >编辑</el-button
                  >
                 
                  <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
          <el-tab-pane label="自营商品预制定价" name="second3">
            <el-button type="primary" @click="btnAdd">自营商品预制定价</el-button>
            <div class="table-area">
          <el-table
            border
            :data="dataList2"
            stripe
         style="width: 100%;height: 100px;"
               v-loading="loading"
            element-loading-text="开发中..."
          >
            
            <el-table-column
              prop="name"
              align="center"
              label="名称"
              #default="scope"
            
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiner"
              label="区间金额"
            />
            <el-table-column
              align="center"
              prop="leixin"
              label="类型"
             
            >
           
            </el-table-column>
            <el-table-column
              prop="dizeng"
              align="center"
              label="递增数值"
              #default="scope"
             
            >
            </el-table-column>
            <el-table-column
              prop="guizhe"
              align="center"
              label="加价规则"
              #default="scope"
            
            >
            </el-table-column>
            <el-table-column
              prop="type"
              align="center"
              label="定价状态"
              #default="scope"
             
            >
            <el-switch v-model="scope.row.type" />
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              
            >
              <template #default="scope">
                <div
                  :style="
                    isMobile ? 'display: flex; flex-direction: column;' : ''
                  "
                >
                <el-button
                    type="primary"
                    
                    size="small"
                  @click="btnAdd"
                    style="margin-bottom: 5px"
                    >编辑</el-button
                  >
                 
                  <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
 
        </el-tabs>
        </div>
      
      </div>
    </div>

     <!-- 预制定价模板 -->
     <el-dialog
            v-model="dingjiaShow"
            :show-close="false"
            draggable
            :title="titleName"
            width="56%"
          >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="对接平台" style="margin-left: 28px;">
              <el-select v-model="form.type"  style="width: 240px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
          </div>
        
          <div class="jibies">
            <el-form-item label="定价起始范围" style="margin-left: 28px;">
              <el-input
              v-model="form.start_price"
              style="max-width: 240px"
              
            >
              <template #prepend>起始值</template>
            </el-input>
          <div style="padding-left: 12px;padding-right: 12px;"> - </div>
            <el-input
              v-model="form.end_price"
              style="max-width: 240px"
            
            >
              <template #prepend>结束值</template>
            </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="我的利润" style="margin-left: 28px;">
              <el-input v-model="form.price_cha" style="width: 240px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="定价类型" style="margin-left: 28px;">
              <el-select v-model="form.plan_id"  style="width: 240px">
                  <el-option
                    v-for="item in dingjiaDate"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="价格" style="margin-left: 56px;">
              <el-input v-model="form.cha_price" style="width: 240px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="等级" style="margin-left: 56px;">
              <el-select v-model="form.price_level"  style="width: 240px">
                  <el-option
                    v-for="item in dengjiDate"
                    :key="item.value"
                    :label="item.lable"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="状态" style="margin-left: 56px;">
              <el-switch v-model="form.status" />
            </el-form-item>
          </div>
        </div>
		
      </div>
	  <div style="display: flex;justify-self: center;">
			<el-button type="primary" plain @click="dingjiaShow=false">取消</el-button>
            <el-button type="primary" @click="addyuzhi">保存</el-button>
		</div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
import {
  getList,userLevelList,editGoodPriceReady
} from "~/base/api/product/fixaprice.ts";
const activeName=ref('second')
const mobanShow=ref(false)
const titleName=ref("")
const dingjiaShow=ref(false)
const loading=ref(true)
const type=ref(3)
//添加预制模板
const form=ref({
  id:"",
  type:"",
  start_price:"",
  end_price:"",
  price_cha:"",
  plan_id:"",
  cha_price:"",
  status:false
})
const pageSize=ref(10)
const currentPage=ref(1)
const total=ref(0)
const yuzhiValue=ref("3")
const options = ref(
  [
  {
    value: '1',
    label: '对接平台预支定价',
  },
  {
    value: '2',
    label: '一键通',
  },
  {
    value: '3',
    label: '平台自营',
  },
 
]
)
const dengjiDate=ref([])
const dingjiaDate = ref(
  [
  {
    value: '1',
    label: '金额累加',
  },
  {
    value: '2',
    label: '折扣累加',
  },

 
]
)
const dataList=ref([
  {
    id:'111111',
    name:'测试',
    leixin:'全部累加',
    jiajia:'共享',
    time:'2024-12-12 23:12:12'
  }
])
const dataList2=ref([
  {
 
    name:'测试',
    jiner:'1214',
    leixin:'金额叠加',
    dizeng:'1.00000',
    guizhe:'11222',
    type:true
  }
])
//预制选择
function getType(e){
  type.value=e
  getLists()
}
//打开预制定价
function addDingjia(){
  dingjiaShow.value=true
  titleName.value='添加'
  clearDate()
}
//打开编辑预制
function edintYuzhi(e){
  dingjiaShow.value=true
  titleName.value='编辑'
  form.value=e
  if(e._status_text =='关闭'){
    form.value.status=false
  }else{
    form.value.status=true
  }
}
//预制保存新增清空
function clearDate(){
  form.value.id=''
  form.value.start_price=''
  form.value.end_price=''
  form.value.plan_id=''
  form.value.cha_price=''
  form.value.status=false
}
//预制保存
function addyuzhi(){
editGoodPriceReady(form.value).then((res)=>{
    if(res.code ==200){
      getLists()
      dingjiaShow.value=false
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }
}).catch((err)=>{
  ElMessage.error(err.msg)
})
}
//打开新增
function btnAdd(){
  mobanShow.value=true
}
//初始化
onMounted(()=>{
  getLists()
  getuserLevelList()
})
//获取等级列表
function getuserLevelList(){
  userLevelList().then((res)=>{
    dengjiDate.value=res.data
  })
}
//列表
function getLists(){
  let parm={
    limit:pageSize.value,
    page:currentPage.value,
    type:type.value
  }
  getList(parm).then((res)=>{
    if(res.code ==200){
      total.value=Number(res.data.count)
      dataList2.value=res.data.data
      for(let item of dataList2.value){
         item.jiner=item.start_price+'-'+item.end_price
      }
    }
    
  })
}
</script>
<style>
.el-input.is-disabled .el-input__wrapper {
  background: white !important;
}</style>
<style scoped>
.deep .el-input.is-disabled .el-input__wrapper {
  background: white !important;
}

.table-area {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}

.tab-header {
  display: flex;
  width: 100%;
}

.area {
  width: 100%;
  background-color: white;
  padding-bottom: 28px;
  margin-top: 18px;
  padding-top: 14px;
}

.content {
  width: 96%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 26px;
}

.header {
  background-color: white;
  padding: 17px 0 1px 12px;
  border-radius: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 基础响应式设置 */
.content {
  width: 96%;
  margin: 0 auto;
  margin-top: 26px;
  padding-bottom: 20px;
}

/* 表格区域响应式 */
.table-area {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  overflow-x: auto;
}

/* 对话框内容 */
.diolog-content {
  padding: 10px;
}

/* 标签页区域 */
.tabs-area {
  margin-top: 12px;
}

/* 配置区域 */
.configurations {
  margin-top: 12px;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin: 20px auto 0;
  text-align: center;
}
.nameshopping {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70px;
  cursor: pointer;
  text-align: center;
}
.nameshopping:hover {
  color: #1890ff;
}
/* 订单区域 */
.order-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
  box-sizing: border-box;
}

/* 刷新按钮样式 */
.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 头部表单 */
  .header {
    padding: 10px;
  }

  /* 表单项目 */
  .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  /* 标签页 */
  .el-tabs {
    overflow-x: auto;
  }

  /* 对话框内容 */
  .diolog-content {
    padding: 5px;
  }

  /* 输入框宽度 */
  .el-input {
    width: 100% !important;
  }

  /* 表格操作按钮 */
  .el-table-column--fixed-right .el-button {
    margin-bottom: 5px;
  }

  /* 标签页头 */
  .tab-header {
    flex-direction: column;
  }

  .tabs {
    margin: 5px 0;
  }

  /* 对话框标题 */
  .el-dialog__title {
    font-size: 16px;
  }
}

/* PC端特定样式 */
@media (min-width: 769px) {
  .content {
    /* max-width: 1200px; */
  }

  .table-area {
    width: 98%;
  }

  .diolog-content {
    min-width: 500px;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}
</style>
